<template>
	<basic-layout v-loading="loading">
		<template v-slot:content-main>
			<div class="lists-section">
				<div
					class="list-section"
					v-for="(item, index) in teamList"
					:key="index"
				>
					<div class="list-title">{{ item.name }}</div>
					<div class="list-content">
						<animate-card
							v-for="(child, index) in item.children"
							:key="child.userId"
							:index="index"
							:name="child.nickName"
							:image="child.avatar"
							:slug="child.userId"
						/>
					</div>
				</div>
			</div>
		</template>
		<template v-slot:content-side>
			<rich-text>
				<div v-html="configInfo.configValue" class="team-page"></div>
			</rich-text>
			<!-- <top-img-list-m v-if="devicePdMode === 'mp'"></top-img-list-m>
			<top-img-list v-if="devicePdMode === 'pc'"></top-img-list> -->
		</template>
	</basic-layout>
</template>

<script>
import { mapGetters } from "vuex";
import BasicLayoutBody from "@/components/layout/BasicLayoutBody";
import AnimateCard from "@/components/AnimateCard";
import RichText from "@/components/RichText";
// import TopImgListM from "@/components/TopImgListM";
// import TopImgList from "@/components/TopImgList";
import { teamClassify, getTeamList, getConfigList } from '@/api';

export default {
	components: {
		"basic-layout": BasicLayoutBody,
		"animate-card": AnimateCard,
		RichText
		// TopImgList,
		// TopImgListM
	},
	data() {
		return {
			loading: true,
			sideData: {},
			teamMap: {},
			teamList: [],
			configInfo: {
				configValue: ''
			}
		};
	},
	computed: {
		...mapGetters(['devicePdMode']),
	},
	watch: {},
	created() {
		this.getConfigInfo();
	},
	activated() {
		this.getTeamList();
	},
	methods: {
		handleClickCard(item) {
			this.sideData = item;
		},
		async getTeamList() {
			try {
				const {code, data = []} = await teamClassify();
				if(code == 200) {
					this.teamList = data.map(item => {
						return {
							name: item.dictLabel,
							value: item.dictValue,
							children: []
						}
					});
					// data.forEach(item => {
					// 	this.teamMap[item.dictValue] = item.dictLabel;
					// });
				}
				const teamRes = await getTeamList();
				if(teamRes.code == 200) {
					this.teamList.forEach(item => {
						const children = teamRes.data.filter(child => item.value == child.postId)
						item.children = children;
					});
				}
			} catch (error) {
				console.log('err-', error);
			}
		},
		getConfigInfo() {
			if(!sessionStorage.getItem('teamConfigInfo')) {
				// configType 配置类型（1-基本信息  2-SEO信息  3-业务信息）
				getConfigList({configType: 3}).then((res) => {
					if(res.code == 200) {
						const arr1 = res.data.filter(item => item.configKey == 'business_contact_team');
						this.configInfo = arr1[0];
						sessionStorage.setItem('teamConfigInfo', JSON.stringify(arr1[0]));
					}
				}).catch((err) => {
					
				});
			} else {
				this.configInfo = JSON.parse(sessionStorage.getItem('teamConfigInfo') || '{}');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.lists-section {
	padding-left: 20px;

	.list-section {
		// margin-bottom: 15px;
		.list-title {
			font-size: 14px;
			font-weight: 400;
			color: #6d6d6d;
			margin-bottom: 4px;
		}

		.list-content {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 15px;
			.item {
				position: relative;
				width: 69px;
				height: 69px;
				margin: 0 20px 22px 0;
				.user-image {
					width: 69px;
					height: 69px;
				}
				.item_title {
					display: none;
					width: 69px;
					height: 69px;
					line-height: 69px;
					overflow: hidden;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					text-align: center;
					font-size: 7px;
				}
				&:hover {
					transition: all 0.2s ease-out;
					opacity: 1;
					transform: scale(1.5);
					.item_title {
						z-index: 999;
						position: absolute;
						top: 0;
						left: 0;
						display: inline-block;
					}
				}
			}
		}
	}
}
.side-section {
	.each-img{
		width: 100%;
	}
	.live-image {
		max-width: 100%;
	}
}
.team-page{
	::v-deep img{
		width: 100%;
	}
}
@media (max-width: 1200px) {
	.lists-section {
		padding: 0px 22px;
	}
	.side-section {
		padding: 0;
	}
}
</style>